<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/pageCss.css">
    <title>浮生若梦，忆往情深</title>
</head>
<style>
    body {
        width: 100%;
        height: 100%;
        position: absolute;

        left: 0px;
        top: 0px;
        background-image: url("img/nier-gaosi.jpg");
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>
<!--不允许拖动打开窗口-->
<body ondragstart="return false">
<div th:replace="part/nav :: nav"></div>
<div class="container" style="margin-top: 4%;">
    <div class="col-md-8">
        <div th:each="postUser:${pageInfo.list}">
            <!--4个字的标签展示5个-->
            <!--5个字的标签展示4个-->
            <!--6个字的标签展示3个-->
            <div class="bg">
                <div class="mr-top list-inline">
                    <div align="left" class="two" style="width: 35%">
                        <span th:each="label:${postUser.post.labels}" th:text="${label.label}" class="label label-info"
                              style="margin-right: 1%;cursor: pointer">标签标签标签</span>
                    </div>
                    <div align="right" class="two" style="width: 65%">
                        <span><a th:onclick="'userSpaceSkip('+${postUser.user.userId}+')'" class="label label-success"
                                 th:text="'作者：'+${postUser.user.userName}">作者：阿汐</a></span>
                        <span class="label label-default" th:text="'时间：'+${postUser.post.postTime}">2020年7月27日</span>
                        <span class="label label-default" th:text="'评论：'+${postUser.post.postComment}">评论：24</span>
                        <span class="label label-default" th:text="'点赞：'+${postUser.post.postLike}">点赞：10</span>
                        <span class="label label-default" th:text="'收藏：'+${postUser.post.postCollection}">收藏：50</span>
                    </div>
                </div>
                <div class="mr-top" style="margin-top: 3.4%;cursor: pointer"
                     th:onclick="'skip('+${postUser.post.postId}+')'">
                    <div style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"
                         th:text="${postUser.post.postTitle}"></div>
                    <div style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"
                         th:text="${postUser.post.postDetail}"></div>
                </div>
            </div>
        </div>
        <div style="opacity: 0.7;" align="center">
            <nav>
                <!--pageInfo.pages-4>=pageInfo.pageNum?-->
                <!--分页-->
                <ul class="pager">
                    <li class="previous" th:classappend="${pageInfo.hasPreviousPage?'':'disabled'}"><a
                            style="color: black;" th:styleappend="${pageInfo.hasPreviousPage?'cursor: pointer;':''}"
                            th:onclick="hasPre([[${pageInfo.hasPreviousPage}]],[[${pageInfo.prePage}]],[[${url}]]);"><label
                            class="glyphicon glyphicon-arrow-left"></label>&nbsp;上一页</a></li>
                    <li th:each="num:${#numbers.sequence(pageInfo.pageNum-4>0?pageInfo.pageNum+4>pageInfo.pages?pageInfo.pages-8:pageInfo.pageNum-4:1,pageInfo.pages-pageInfo.pageNum>4?pageInfo.pageNum-4<=0?9:pageInfo.pageNum+4:pageInfo.pages)}">
                        <a style="color: black;"
                           th:styleappend="${num==pageInfo.pageNum?'background-color: #449d44':''}" th:text="${num}"
                           th:href="${url}+${num}"></a></li>
                    <li class="next" th:classappend="${pageInfo.hasNextPage?'':'disabled'}">
                        <a style="color: black;"
                           th:styleappend="${pageInfo.hasNextPage?'cursor: pointer;':''}"
                           th:onclick="hasNext([[${pageInfo.hasNextPage}]],[[${pageInfo.nextPage}]],[[${url}]]);">下一页&nbsp;<label
                                class="glyphicon glyphicon-arrow-right"></label></a></li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="col-md-4">
        <div style="position: fixed;width: 25%">
            <div class="bg" style="word-wrap: break-word;">
                <div align="center" th:if="${session.user==null}"><h3>未登录</h3></div>
                <div th:if="${session.user!=null}">
                    <div class="panel panel-default">
                        <div class="panel-heading">个人信息：</div>
                    </div>
                    <table width="100%" style="table-layout:fixed;margin-left: 3%;">
                        <!--${session.user.userImage}-->
                        <tr>
                            <td rowspan="4"><img th:src="${session.user.userImage}" width="100px" height="100px"
                                                 style="object-fit: cover;"/></td>
                            <td style="width: 80%" align="center" th:text="'uid：'+${session.user.userId}">uid：*</td>
                        </tr>
                        <tr>
                            <td style=" overflow:hidden;white-space:nowramp;text-overflow:ellipsis;" align="center"
                                th:text="${session.user.userName}">一生所爱
                            </td>
                        </tr>
                        <tr>
                            <td align="center"
                                th:text="${session.user.userGender==1?'♂':(session.user.userGender==0?'♀':'未知')}">男
                            </td>
                        </tr>
                        <tr>
                            <td align="center" th:text="${session.user.userBirthday}">2000-1-1</td>
                        </tr>
                        <!--<tr>-->
                        <!--    <td colspan="2" style="padding-top: 3%;" th:text="${session.user.userDetail}"><p>-->
                        <!--        这个人很懒，什么都没写。</p></td>-->
                        <!--</tr>-->
                    </table>
                    <div class="panel panel-default" style="margin-top: 4%">
                        <div class="panel-heading">我的留言：</div>
                        <div class="panel-body" th:text="${session.user.userDetail}"></div>
                    </div>
                </div>
            </div>
            <div class="bg" style="word-wrap: break-word;">
                <div align="center"><h3>公告</h3></div>
                <div><p>欢迎使用回忆论坛</p></div>
            </div>
        </div>
    </div>

</div>
<script src=" js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    //如果有前一页跳转
    function hasPre(hasPre, prePage, url) {
        if (hasPre == true) {
            window.location.href = url + prePage;
        }
    }

    //如果有后一页跳转
    function hasNext(hasNext, nextPage, url) {
        if (hasNext == true) {
            window.location.href = url + nextPage;
        }
    }

    //通过内容id跳转
    function skip(id) {
        window.location.href = "/browsePost.htm?id=" + id;
    }

    //通过userID跳转
    function userSpaceSkip(id) {
        window.location.href = "/browseUser.htm?id=" + id;
    }
</script>
</body>
</html>
